/**
 * Created by bethinner on 6/7/16.
 */
import React, { Component } from 'react';

import { connect } from 'react-redux'
import Link from 'react-router/lib/Link'
import browserHistory from 'react-router/lib/browserHistory'


export default class EditText extends Component {
    constructor(props) {
        super(props);

        this.state = {textLength: 0};
    }

    componentWillMount() {
    }
    onMyTextChange(event) {
        if(event.target.value.length>this.props.maxLen){
            event.target.value=event.target.value.slice(0,this.props.maxLen);
        }
        this.setState({textLength:event.target.value.length});

        this.props.onTextChange(event)
    }
    getIcon() {
        if (this.props.imgSrc == "") {
            return ""
        } else {
            return (<img src={this.props.imgSrc} style={{width:'20px',height:'20px'}}/>)
        }
    }

    cleanInputValue() {
        document.getElementById(this.props.placeholder).value = "";
        this.setState({textLength:0});
    }

    getCleanImg() {
        //判断input文字数量,大于0显示
        if (this.state.textLength > 0) {
            return (
                <img style={cleanImgStyle} src="public/img/ic_clean.png" onClick={this.cleanInputValue.bind(this)}/>
            )
        } else {
            return ""
        }

    }

    render() {
        return (
            <div style={{borderBottom:"1px solid #6BAC72"}}>
                {this.getIcon()}
                <input
                    id={this.props.placeholder}
                    style={inputStyle}
                    type={this.props.type}
                    placeholder={this.props.placeholder}
                    onChange={this.onMyTextChange.bind(this)}
                />
                {this.getCleanImg()}
            </div>

        )
    }
}
let inputStyle = {
    outline: "none",
    border: "none",
    width: "80%",
    fontSize: '14px',
    padding: '4px'
}
let cleanImgStyle = {
    width: "16px", height: "16px"
}


EditText.defaultProps = {
    imgSrc: "",
    type: "",
    placeholder: "请输入",
    onTextChange: null,
    maxLen:999
}

EditText.propTypes = {
    imgSrc: React.PropTypes.string,
    type: React.PropTypes.string,
    placeholder: React.PropTypes.string,
    onTextChange: React.PropTypes.func
}


